<template>
  <div class="eldrawer" v-loading="loading" element-loading-text="图片上传中">
    <h4>当前车辆发布编号：{{ id }}</h4>
    <h3>上传车辆照片</h3>
    <el-row>
      <el-col :span="3.5" class="block" v-for="(fit, l) in fits" :key="l">
        <h5>{{ fit.title }}</h5>
        <div class="normalImgUploadWrapper">
          <i v-show="fit.url" @click="deleteImg(l)" class="el-icon-delete-solid"></i>
          <i v-show="!fit.url" @click="addImg(l)" class="el-icon-plus"></i>
          <div role="button" tabindex="0">
            <input
              ref="input"
              class="normalImgUploadAdd"
              accept="image/jpeg,image/jpg,image/png"
              multiple="5"
              type="file"
              autocomplete="off"
              style="display: none"
              value=""
              @change="fileChange($event, l)"
            />
          </div>
          <img v-show="fit.url" class="inputImg" :src="fit.url" alt="" />
        </div>
      </el-col>
    </el-row>
    <div class="botton"></div>
    <el-row>
      <el-col :span="4"> <el-button type="primary" @click="publish">上传图片</el-button></el-col>
      <el-col :span="16"
        ><div class="bg-purple">
          <span>温馨提示：不上传图片或上传失败，当前车辆将不会被发布，可在个人中心草稿继续上传。</span>
          <h4>!必须上传六张图片。</h4>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { publishImge } from '@/api/cart'
export default {
  name: 'EldrAwer',
  props: ['id'],
  data() {
    return {
      loading: false,
      data: new FormData(),
      fits: [
        { url: '', title: '车头图' },
        { url: '', title: '侧面图' },
        { url: '', title: '尾部图' },
        { url: '', title: '内饰图' },
        { url: '', title: '发动机' },
        { url: '', title: '其他' }
      ]
    }
  },
  methods: {
    // 提交
    async publish() {
      this.loading = true
      this.data.append('personal_car_id', this.id)
      const res = await publishImge(this.data)
      // const res = await publishImge(this.datalist)
      if (res.data.statu == 200) {
        this.loading = false
        this.$emit('updata')
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 选择图片完成时触发
    fileChange(event, l) {
      event.preventDefault()
      const file = event.srcElement.files[0]
      const num = l + 1
      const title = 'img' + num
      // this.datalist[title] = file
      this.data.append(title, file)
      // const file = URL.createObjectURL(fileObj) var reader = new FileReader();
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = e => {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        const imgcode = e.target.result
        this.fits[l].url = imgcode
      }
      // 3.2 为文件对象创建临时的url
      // url.value = fileObj
    },
    // 添加照片
    addImg(l) {
      this.$refs.input[l].click()
    },
    // 删除图片
    deleteImg(l) {
      this.fits[l].url = ''
      console.log(l)
    }
  }
}
</script>
<style lang="less" scoped>
.inputTextValue {
  border: 1px solid #ccc;
  width: 70%;
  height: 32px;
  margin-top: 10px;
}
.normalImgUploadWrapper:hover .el-icon-delete-solid {
  display: block;
}
.normalImgUploadWrapper {
  position: relative;
  height: 180px;
  width: 200px;
  border: 1px solid #ccc;
  :hover {
    cursor: pointer;
  }
  .inputImg {
    height: 180px;
    width: 200px;
  }
  .el-icon-delete-solid {
    display: none;
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .el-icon-plus {
    position: absolute;
    font-size: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.el-icon-refresh {
  color: red;
  font-size: 30px;
  cursor: pointer;
}
/deep/.cascader {
  span {
    padding: 0 0 0 10px;
  }
}
.eldrawer {
  h5 {
    margin: 10px;
    text-align: center;
  }
  .bg-purple {
    color: red;
  }
  .botton {
    margin: 50px;
  }
  margin-left: 50px;
  h4 {
    margin-top: 0;
  }
}
</style>
